@extends('layouts.back_stage')
@section('content')
  <style>
   #app{padding:20px}
   [v-cloak] {display: none;}
   .table_margin{padding:20px;background:#fff;margin-top:10px}
  .ingred_sel{width:250px;margin:0 30px 0 10px}
  /* span{float:right;} */
  font_text{margin-right:20px}
  ::-webkit-scrollbar {height: 8px;}
  .demo-table-expand {
    font-size: 0;
   
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
.qq{margin-top:20px}
  .el-table__expanded-cell[class*=cell]{padding:0px} 
  
  </style>
  <div class="container">
      <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">包码查询</h3></div>
        <div class="page-body" id="app" v-cloak> 
        <div class="table_margin"  >
             <label>条形码：</label>
                <el-input  class="ingred_sel" v-model="amount_odd"  size="small"   @keyup.native='Upkey(amount_odd)'   placeholder="请输入条形码" clearable></el-input>
               <label>单据号：</label>
                <el-input  class="ingred_sel" v-model="amount_bills" size="small" placeholder="请输入单据号" clearable></el-input>
              <span> 
                <el-button type="primary"  @click="seek" size="small" >搜索</el-button>
                <el-button  type="primary" class="font_text" @click="reset"size="small" >重置</el-button>
               </span>  
           </div>
           <div class="table_margin">
              <template>
                <el-table
                  :data="tableData1"
                  border  
                  size="mini"
                  :resizable='false'
                  style="width: 100%;text-align:center">
                  <el-table-column
                    prop="packet_code"
                    label="条码"
                    :resizable='false'
                    align="center"
                    min-width="150"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="girard"
                    label="款号"
                    :resizable='false'
                    align="center"
                    min-width="130">
                  </el-table-column>
                  <el-table-column
                    prop="color"
                    label="颜色"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="size"
                    label="尺码"
                    :resizable='false'
                    align="center"
                    min-width="150">
                  </el-table-column>
                  <el-table-column
                    prop="receipt"
                    label="单据号"
                    :resizable='false'
                    align="center"
                    min-width="150">
                  </el-table-column>

                  <el-table-column
                    prop="owner"
                    align="center"
                    :resizable='false'
                    label="条码归属"
                    min-width="150"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="updated_at"
                    label="扫码时间"
                    :resizable='false'
                    align="center"
                    min-width="150"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="loged_by"
                    label="扫描人"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                </el-table>
              </template>
           </div>

           <div class="table_margin"  >
              <template>
                <el-table
                  :data="tableData2"
                  border  
                  size="mini"
                  :resizable='false'
                  style="width: 100%;text-align:center">
                  <el-table-column
                    prop="aa"
                    label="单据号"
                    :resizable='false'
                    align="center"
                    width="180"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="bb"
                    label="条码"
                    :resizable='false'
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="cc"
                    label="款号"
                    :resizable='false'
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="dd"
                    label="颜色"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="ee"
                    label="尺码"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="ff"
                    label="条码归属"
                    :resizable='false'
                    align="center"
                   >
                   </el-table-column>
                  <el-table-column
                    prop="gg"
                    label="扫码时间"
                    :resizable='false'
                    align="center"
                   >
                  </el-table-column>
                  <el-table-column
                    prop="hh"
                    label="扫描人"
                    :resizable='false'
                    align="center"
                    width="100">
                  </el-table-column>
                </el-table>
              </template>
              
             <div class="qq">
              <template>
                  <el-table
                  border
                  size="mini"
                    :data="tableData3"
                    :resizable='false'
                    style="width: 100%">
                    <el-table-column type="expand">
                      <!-- <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="商品名称">
                            <span>@{{ props.row.name }}</span>
                          </el-form-item>
                          <el-form-item label="所属店铺">
                            <span>@{{ props.row.shop }}</span>
                          </el-form-item>
                          <el-form-item label="商品 ID">
                            <span>@{{ props.row.id }}</span>
                          </el-form-item>
                          <el-form-item label="店铺 ID">
                            <span>@{{ props.row.shopId }}</span>
                          </el-form-item>
                          <el-form-item label="商品分类">
                            <span>@{{ props.row.category }}</span>
                          </el-form-item>
                          <el-form-item label="店铺地址">
                            <span>@{{ props.row.address }}</span>
                          </el-form-item>
                          <el-form-item label="商品描述">
                            <span>@{{ props.row.desc }}</span>
                          </el-form-item>
                        </el-form>
                      </template> -->

   <template slot-scope="props">
    <el-table
    size="mini"
     :show-header="headerShow"
      :data="tableData"
      :resizable='false'
      style="width: 100%">
      <el-table-column
          label="11"
          :resizable='false'
          align="center"
          width="48"
          prop="1232">
        </el-table-column>
      <el-table-column
      label="条码"
      :resizable='false'
      align="center"
      prop="packet_code">
    </el-table-column>
    <el-table-column
      label="款号"
      :resizable='false'
      align="center"
      width="100"
      prop="girard">
    </el-table-column>
    <el-table-column
      label="颜色"
      :resizable='false'
      width="80"
      align="center"
      prop="color">
    </el-table-column>
    <el-table-column
      label="尺码"
      :resizable='false'
      width="100"
      align="center"
      prop="size">
    </el-table-column>
    <el-table-column
      label="规格"
      align="center"
      :resizable='false'
      width="90"
      prop="num">
    </el-table-column>
    <el-table-column
      label="绑定数量"
      :resizable='false'
      width="100"
      align="center"
      prop="exists">
    </el-table-column>
    <el-table-column
      label="绑定单据"
      :resizable='false'
      align="center"
      prop="receipt">
    </el-table-column>
    <el-table-column
      label="扫描时间"
      :resizable='false'
      align="center"
      prop="loged_at">
    </el-table-column>
    <el-table-column
      label="扫描人"
      :resizable='false'
      align="center"
      width="80"
      prop="loged_by">
    </el-table-column>
    </el-table>
  </template>

                    </el-table-column>
                    <el-table-column
                      label="条码"
                      align="center"
                      :resizable='false'
                      prop="packet_code">
                    </el-table-column>
                    <el-table-column
                      label="款号"
                      align="center"
                      :resizable='false'
                      width="100"
                      prop="girard">
                    </el-table-column>
                    <el-table-column
                      label="颜色"
                      :resizable='false'
                      width="80"
                      align="center"
                      prop="color">
                    </el-table-column>
                    <el-table-column
                      label="尺码"
                      width="100"
                      :resizable='false'
                      align="center"
                      prop="size">
                    </el-table-column>
                    <el-table-column
                      label="规格"
                      align="center"
                      :resizable='false'
                      width="90"
                      prop="num">
                    </el-table-column>
                    <el-table-column
                      label="绑定数量"
                      width="100"
                      align="center"
                      :resizable='false'
                      prop="exists">
                    </el-table-column>
                    <el-table-column
                      label="绑定单据"
                      align="center"
                      :resizable='false'
                      prop="receipt">
                    </el-table-column>
                    <el-table-column
                      label="扫描时间"
                      align="center"
                      :resizable='false'
                      prop="updated_at">
                    </el-table-column>
                    <el-table-column
                      label="扫描人"
                      align="center"
                      :resizable='false'
                      width="80"
                      prop="loged_by">
                    </el-table-column>
                  </el-table>
                </template>
                </div> 
           </div>
        </div>         
  </div>
 
  <script>
      new Vue({
        el: '#app',
      data() {    
          return {
            headerShow:false,
            amount_odd:'',//条形码
            amount_bills:'',//单据号
            tableData1: [],
           tableData2: [],
           tableData3: [],
            tableData: []
          }
        },
        watch:{
          amount_odd:function(val){
            // let that=this
            // console.log(1111,val)
            //   val.replace(/[^0-9-]+/,'')
            // var rest=/^[A-Za-z0-9]+$/;           
            //    if(!rest.test(val)){
            //     console.log(2222,this.amount_odd)
            //     that.amount_odd=''
            //       console.log(333,this.amount_odd)
            //     }
          }
        },
      methods: {
        Upkey(val){
          var rest=/^[A-Za-z0-9]+$/;           
               if(!rest.test(val)){
                  this.amount_odd=''
                }
        },
         //搜索
         seek(){
           let that=this
           const opt=[]
           const list=[]
           const sert=[]
           that.tableData=[]
              if(this.amount_odd!='' || this.amount_bills!=''){
                $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'get',
                    url:`/packs/query`,
                    data:{
                      code:this.amount_odd,
                      order:this.amount_bills
                    },
                    success:function(res){
                       console.log(res)
                       if(res.result.success==true){
                       for(var e in res.content.goods){
                         var loged_at=res.content.goods[e].loged_at;
                         var loged_by=res.content.goods[e].loged_by.split(',')[1];
                          let test={
                            'packet_code':res.content.goods[e].code,
                            'girard':res.content.girard,
                            'color':res.content.color,
                            'size':res.content.goods[e].size,
                            'exists':`-`,
                            'num':`-`,
                            'receipt':res.content.receipt,
                            'loged_at':loged_at,
                            'loged_by':loged_by
                          }
                      that.tableData.push(test)
                       }
                      if(res.result.success==true){
                         opt.push({
                            'packet_code':res.content.packet_code,
                            'girard':res.content.girard,
                            'color':res.content.color,
                            'size':res.content.size,
                            'receipt':res.content.receipt,
                            'owner':res.content.owner.split(',')[1],
                            'updated_at':loged_at,
                            'loged_by':loged_by
                         })
                         that.tableData1=opt;
                            list.push({
                                'packet_code':res.content.packet_code,
                                'girard':res.content.girard,
                                'color':res.content.color,
                                'size':res.content.size,
                                'num':`${res.content.num}件/包`,
                                'exists':res.content.exists,
                                'receipt':res.content.receipt,
                                'updated_at':loged_at,
                                'loged_by':loged_by
                            })
                         that.tableData3=list 
                          sert.push({
                            'aa':`-`,
                            'bb':`-`,
                            'cc':`-`,
                            'dd':`-`,
                            'ee':`-`,
                            'ff':`-`,
                            'gg':`-`,
                            'hh':`-`,
                          })
                          that.tableData2=sert 
                      }else{
                        that.$notify.error({
                                title: '提示',
                                message: '条形码有误 请输入正确的条形码'
                            });
                       
                      }
                    }else{
                      that.$notify.error({
                                title: '提示',
                                message: res.result.errorMsg
                            });
                    }
                    }
                  })
              }else{
                this.$notify.success({
                      title: '提示',
                      message: '请输入要查询的内容',
                  });
              }
            },
            //重置
            reset(){
              this.amount_odd='' 
              this.amount_bills=''
              this.tableData1=[],
              this.tableData2=[],
              this.tableData3=[],
              this.tableData=[]
            },
      
       },
       created(){
         
          }
      })
  </script>
@endsection